<template>
  <div id="app">
    <transition name='slideLeft'>
      <SideMenu v-show='showMenu' @close='showMenu=false'></SideMenu>
    </transition>

    <transition :name='aniType'>
      <router-view></router-view><!--在路由中注册的页面显示在这里-->
    </transition>
    
  </div>
</template>

<script>
import SideMenu from './components/SideMenu'
import bus from './util/bus.js' /*导入一个总线文件，监听总线发射的事件*/
export default {
    name:'app',
    data:function(){
      return{
        showMenu:false,
        aniType :''
      }
    },
    components:{
      SideMenu,
    },
    mounted:function(){
      bus.$on('openMenu',function(){
        this.showMenu = true
      }.bind(this))
    },
    watch:{
      /*
        watch监听$route可以知道路由的变化
      */
      $route:function(to,from){
        var toNum = to.path.split('/').length - 1
        var fromNum = from.path.split('/').length - 1
        if(toNum>fromNum){
          this.aniType = 'pageIn'
        }else if(toNum<fromNum){
          this.aniType = 'pageOut'
        }else{
          this.aniType = ''
        }
      }
    }
}
</script>

<style scoped>
/*左侧导航进入动画*/
.slideLeft-enter{
  transform: translateX(-100%); /*平移是从左上角开始计算的*/
}
.slideLeft-enter-active{
  transition: all 0.7s;    
}
.slideLeft-leave-active{
  transform: translateX(-100%);
  transition: all 0.7s;
}
/*二级页面进入动画*/
.pageIn-enter{
  transform: translate(100%,0)
}
.pageIn-enter-active{
  transition: all 0.7s linear; 
  position: absolute;
  width: 100%;
}
.pageIn-leave-active{
  transform: translate(-80%,0);
  transition: all 0.7s linear; 
  position: absolute;  
  width: 100%;
}
/*二级页面退出动画*/
.pageOut-enter{
  transform: translate(-80%,0)
}
.pageOut-enter-active{
  transition: all 0.7s linear; 
  position: absolute;
  width: 100%;
  z-index: 1; /*进入的覆盖退出的*/
}
.pageOut-leave-active{
  transform: translate(100%,0);
  transition: all 0.7s linear; 
  position: absolute;  
  width: 100%;
}
</style>
